---
{
	"title": "Correctif « input type=\"date\" » (sélecteur de date)",
	"language": "fr",
	"category": "Correctifs",
	"categoryfile": "polyfills",
	"description": "Émule l’élément <input type=\"date\"> pour les navigateurs qui ne le supportent pas. Cela génère dynamiquement une interface de calendrier pour sélectionner une date dans un formulaire.",
	"altLangPrefix": "datepicker",
	"dateModified": "2020-09-15"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Objet</h2>
	<p>Fournir une interface pour sélectionner une date dans un formulaire. Met en œuvre le <a href="https://www.w3.org/TR/wai-aria-practices/#datepicker">modèle de conception &#171;&#160;<span lang="en">Date Picker</span>&#160;&#187; de WAI-ARIA (anglais seulement)</a>.</p>
</section>

<section>
	<h2>Utilisation</h2>
	<p>Cette fonctionnalité peut être utilisée sur n'importe quelle page où sélectionner une date dans un formulaire est requis.</p>
</section>

<section>
	<h2>Exemple pratique</h2>
	<ul>
		<li><a href="../../../demos/datepicker/datepicker-en.html">Exemple en anglais</a></li>
		<li><a href="../../../demos/datepicker/datepicker-fr.html">Exemple en français</a></li>
	</ul>
</section>

<section>
	<h2>Mise en œuvre</h2>
	<ol>
		<li>Ajouter un champ de saisie de texte pour chaque date qui sera demandée. Chaque champ de saisie de texte doit implémenter le type <code>date</code>.</li>
		<li><strong>Facultatif :</strong> Enrouler le format de date avec <code>&lt;span class="datepicker-format"&gt;&lt;/span&gt;</code> pour le cacher lorsque le correctif ne charge (à cause du soutien natif).</li>
		<li><strong>Facultatif :</strong> Ajouter l'attribut <code>max</code> indiquant la date la plus éloignée que peut sélectionner l'utilisateur.</li>
		<li><strong>Facultatif :</strong> Ajouter l'attribut <code>min</code> indiquant la date la plus proche que peut sélectionner l'utilisateur.</li>
	</ol>

	<h3>Code d'exemple</h3>
	<pre><code>&lt;div&gt;
	&lt;label for="startdate"&gt;Date de début&lt;span class="datepicker-format"&gt; (&lt;abbr title="Les quatre chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour"&gt;AAAA-MM-JJ&lt;/abbr&gt;)&lt;/span&gt;&#160;:&lt;/label&gt;
	&lt;input type="date" id="startdate" name="startdate" min="2013-03-27" max="2013-05-07" /&gt;
&lt;/div&gt;
&lt;div&gt;
	&lt;label for="enddate"&gt;Date de fin&lt;span class="datepicker-format"&gt; (&lt;abbr title="Les quatre chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour"&gt;AAAA-MM-JJ&lt;/abbr&gt;)&lt;/span&gt;&#160;:&lt;/label&gt;
	&lt;input type="date" id="enddate" name="enddate" min="2013-03-27" max="2016-05-07" /&gt;
&lt;/div&gt;</code></pre>
</section>

<section>
	<h2>Options de configuration</h2>

	<table class="table">
		<thead>
			<tr>
				<th>Option</th>
				<th>Description</th>
				<th>Configuration</th>
				<th>Exemple</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>Cacher le format de la date</td>
				<td>Cacher le format de la date lorsque le correctif ne charge pas (à cause du soutien natif).</td>
				<td>Enrouler le format de date avec : <pre><code>&lt;span class="datepicker-format"&gt;&lt;/span&gt;</code></pre></td>
				<td>
					<pre><code>&lt;label for="startdate"&gt;Date de début&lt;span class="datepicker-format"&gt; (&lt;abbr title="Les quatre chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour"&gt;AAAA-MM-JJ&lt;/abbr&gt;)&lt;/span&gt;</code></pre>
				</td>
			</tr>
			<tr>
				<td>Date min</td>
				<td>La date la plus proche que peut sélectionner l'utilisateur.</td>
				<td>Ajouter l'attribut « min » avec une date en format <abbr title="Les quatre chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour">AAAA-MM-JJ</abbr> pour indiquer la date la plus proche que peut sélectionner l'utilisateur.</td>
				<td>
					<pre><code>&lt;input type="date" id="startdate" name="startdate" min="2013-03-27" /&gt;</code></pre>
				</td>
			</tr>
			<tr>
				<td>Date max</td>
				<td>La date la plus éloignée que peut sélectionner l’utilisateur.</td>
				<td>Ajouter l'attribut « max » avec une date en format <abbr title="Les quatre chiffres de l'année, tiret, les deux chiffres du mois, tiret, les deux chiffres du jour">AAAA-MM-JJ</abbr> pour indiquer la date la plus éloignée que peut sélectionner l'utilisateur.</td>
				<td>
					<pre><code>&lt;input type="date" id="startdate" name="startdate" max="2013-05-07" /&gt;</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Événements</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Événement</th>
				<th>Déclencheur</th>
				<th>Fonction</th>
			</tr>
		</thead>
		<tbody lang="en">
			<tr>
				<td><code>wb-init.wb-date</code></td>
				<td>Triggered manually (e.g., <code>$( "input[type=date]" ).trigger( "wb-init.wb-date" );</code>).</td>
				<td>Used to manually initialize the <code>input type="date"</code> polyfill. <strong>Note:</strong> The <code>input type="date"</code> polyfill will be initialized automatically unless the <code>input type="date"</code> element is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-date</code> (v4.0.5+)</td>
				<td>Triggered automatically after the <code>input type="date"</code> polyfill initializes. <strong>Note:</strong> This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native <code>input type="date"</code> support.</td>
				<td>Used to identify where the <code>input type="date"</code> polyfill initialized (target of the event)
					<pre><code>$( document ).on( "wb-ready.wb-date", "input[type=date]", function( event ) {
});</code></pre>
					<pre><code>$( "input[type=date]" ).on( "wb-ready.wb-date", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Code source</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/polyfills/datepicker">Code source pour le correctif « input type="date" » (sélecteur de date)</a></p>
</section>
